<template>
  <div>
    <div class="toolbar">
      <el-select v-model="offeringId" placeholder="选择开课" filterable clearable style="width: 260px">
        <el-option v-for="o in offeringOptions" :key="o.id" :label="`开课#${o.id} 课程${o.courseId} 班级${o.classId} 学期${o.termId}`" :value="o.id" />
      </el-select>
      <el-button type="warning" @click="publish" :disabled="!offeringId">发布成绩</el-button>
    </div>
    <el-alert title="发布会将该开课的成绩计算并标记为已发布" type="info" show-icon />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { publishScores } from '@/api/grades/scores'
import { listOfferings, type CourseOffering } from '@/api/grades/offerings'

const offeringId = ref<number | undefined>(undefined)
const offeringOptions = ref<CourseOffering[]>([])

async function publish() {
  if (!offeringId.value) return
  try {
    await publishScores(offeringId.value)
    ElMessage.success('成绩发布成功')
  } catch (e: any) {
    ElMessage.error(e?.message || '发布失败')
  }
}

async function loadOfferingOptions() {
  try {
    offeringOptions.value = await listOfferings({})
  } catch {}
}

onMounted(() => {
  loadOfferingOptions()
})
</script>

<style scoped>
.toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  align-items: center;
}
</style>